<template>
  <div class="recursion-wrapper">
    <!-- item template -->

    <p>(You can double click on an item to turn it into a folder.)</p>

    <!-- the demo root element -->
    <ul id="demo">
      <recursion-item
        class="item"
        :item="treeData"
        @make-folder="makeFolder"
        @add-item="addItem"
      ></recursion-item>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject } from "vue";
import RecursionItem from "@/views/RecursionItem.vue";
interface IChild {
  name: string | number;
  children: Array<IChild>;
}

export default defineComponent({
  components: {
    RecursionItem,
  },
  setup() {
    const color = inject('$color');
    return { color };
  },
  data() {
    return {
      treeData: {
        name: "My Tree",
        children: [
          { name: "hello" },
          { name: "wat" },
          {
            name: "child folder",
            children: [
              {
                name: "child folder",
                children: [{ name: "hello" }, { name: "wat" }],
              },
              { name: "hello" },
              { name: "wat" },
              {
                name: "child folder",
                children: [{ name: "hello" }, { name: "wat" }],
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    makeFolder(item: IChild) {
      item.children = [];
      this.addItem(item);
    },
    addItem(item: IChild) {
      item.children.push({
        name: "new stuff",
        children: [],
      });
    },
  },
});
</script>

<style>
.recursion-wrapper {
  font-family: Menlo, Consolas, monospace;
  color: v-bind(color);
}
.item {
  cursor: pointer;
}
.bold {
  font-weight: bold;
}
ul {
  padding-left: 1em;
  line-height: 1.5em;
  list-style-type: dot;
}
</style>